import React from 'react';
import { Card, Descriptions, Button, Space } from 'antd';
import { SettingOutlined, EditOutlined } from '@ant-design/icons';

const RulesSection = ({ rules}) => {
  // 格式化日期
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <Card className="info-section" style={{ minHeight: '400px' }}>
      <div className="section-header">
        <div className="section-title">
          <SettingOutlined />
          网络规则配置
        </div>
      </div>
      <div className="section-content">
        <Descriptions column={1} bordered size="small">
          <Descriptions.Item label="ε值">
            <code>{rules.epsilonValue}</code>
          </Descriptions.Item>
          <Descriptions.Item label="标准比例">
            <code>{rules.normRatio}</code>
          </Descriptions.Item>
          <Descriptions.Item label="δ值">
            <code>{rules.deltaValue}</code>
          </Descriptions.Item>
          <Descriptions.Item label="最大下载比例">
            <code>{rules.maxDownloadRatio}</code>
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {formatDate(rules.updatedAt)}
          </Descriptions.Item>
          <Descriptions.Item label="更新者">
            {rules.updatedByUsername}
          </Descriptions.Item>
        </Descriptions>
      </div>
    </Card>
  );
};

export default RulesSection;